<template>
	<view>
		<view>
			<!-- 任务信息部分 -->
			<view
				v-for="(item, index) in taskInfos"
				:key="index"
				style="margin-bottom: 1px;"
			>
				<CellInput
					v-if="item.prop !== 'repairDesc'"
					v-model="item.value"
					:isReadonly="item.readonly"
					:label="item.label"
					:placeholder="item.placeholder"
					:theme="item.theme"
					:inputBorder="item.isBorder ? item.border : 'none'"
					:labelWidth="item.labelWidth ? item.labelWidth : '90px'"
					:rightIcon="item.isRight ? item.rightIcon : ''"
					:rightIconColor="item.isRight ? item.rightIconColor : ''"
					@handleRightIconClick="handleRightIconClick($event, item)"
				/>
				
				<RepairDesc
					v-if="item.prop === 'repairDesc'"
					:label="item.label"
					:textMsgList="item.textMsgList"
					:pictureList="item.pictureList"
					:voiceList="item.voiceList"
					:videoList="item.videoList"
					@handleClick="handleRepairDesc($event, item)"
				/>
			</view>
			
			<!-- 派工结果 -->
			<view
				class="flex justify-between mar-y-10 bg-3aa1ff"
			>
				<view class="w-px-90 h-px-40 mar-x-15 flex align-center font-14 color-white"
					:style="{
						borderRight: '1px #eeeeee solid',
					}"
				>
					<text>派工结果</text>
				</view>
				
				<view class="flex flex-1 align-center">
					<view class="flex align-center flex-1 h-px-40 font-14 color-white">
						<text>{{ dispatchResult }}</text>
					</view>
					
					<view class="w-px-20 mar-r-15">
						<text class="iconfont icon-dianhua font-14 color-white" @click="callHim('15284575685')"></text>
					</view>
				</view>
			</view>
			
			<!-- 其他 -->
			<view
				v-for="(item, index) in otherInfos"
				style="margin-bottom: 1px;"
			>
				<CellInput
					v-model="item.value"
					:isReadonly="item.readonly"
					:label="item.label"
					:placeholder="item.placeholder"
					:theme="item.theme"
					:inputBorder="item.isBorder ? item.border : 'none'"
					:labelWidth="item.labelWidth ? item.labelWidth : '90px'"
					:rightIcon="item.isRight ? item.rightIcon : ''"
					:rightIconColor="item.isRight ? item.rightIconColor : ''"
				/>
			</view>
			
			<!-- 时间轴 -->
			<view
				class="flex justify-between mar-y-10 bg-3aa1ff"
				@click.native.stop="toTimeAxis()"
			>
				<view class="w-px-90 h-px-40 mar-x-15 flex align-center font-14 color-white">
					<text class="iconfont icon-timeAxis mar-r-5" style="margin-top: 2px;"></text>
					<text>时间轴</text>
				</view>
			</view>
			
			<!-- 故障件信息 -->
			<view class="mar-t-10">
				<view
					class="flex justify-between align-center h-px-40 bg-dbdcf8 font-14 pad-x-15"
				>
					<text>故障件</text>
				</view>
				
				<!-- 故障件列表 -->
				<view>
					<Classify
						v-for="(item, index) in repairList"
						:ref="'classify' + index"
						:key="index"
						:index="index"
						:classifyTitle="item.classifyTitle"
						:classifyName="item.classifyName"
						:classifyData="item.list"
						:isExpand="item.isExpand"
						:isEdit="true"
						@handleExpand="handleExpand"
						@handleAttachment="handleAttachment($event)"
						@handleSelectRepairType="handleSelectRepairType"
						@handleSelectSettlementType="handleSelectSettlementType"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CellInput from '@/components/CellInput/index'
	import Classify from '@/components/Repair/Classify/index'
	import RepairDesc from '@/components/RepairDesc/index'
	import Utils from '@/utils/utils'
	
	import { mapState } from 'vuex'
	
	export default {
		components: {
			CellInput,
			Classify,
			RepairDesc,
		},
		
		computed: {
			...mapState({
				token: state => state.user.token,
				longitude: state => state.user.longitude,
				latitude: state => state.user.latitude,
				textMsgList: state => state.repair.textMsgList,
				pictureList: state => state.repair.pictureList,
				voiceList: state => state.repair.voiceList,
				videoList: state => state.repair.videoList,
				repairList: state => state.repair.repairList
			}),
		},
		
		watch: {
			// 监听故障件列表变化
			repairList(newVal, oldVal) {
				this.isOperate = true
			}
		},
		
		data() {
			return {
				cartNum: '', // 车号
				customerName: '', // 客户名称
				
				// 任务信息
				taskInfos: [],
				
				// 派工结果
				dispatchResult: '',
				
				// 其他
				otherInfos: [],
				
				// 车辆信息
				cartInfos: [],
			}
		},
		
		onLoad(options) {
			// 设置页面传过来的参数
			this.cartNum = options.cartNum
		},
		
		mounted() {
			this.initComponent() // 初始化组件
			this.findOrderDetails() // 查询订单详情
		},
		
		onUnload() {
			// 页面卸载后，重置一些状态管理中的数据
			this.$store.commit('repair/setDescInfo', { type: 1, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 2, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 3, data: [] })
			this.$store.commit('repair/setDescInfo', { type: 4, data: [] })
			this.$store.commit('repair/resetRepairComponent', [])
		},
		
		methods: {
			// 初始化组件
			initComponent() {
				// 任务信息
				this.taskInfos = [
					{
						prop: 'customerName', // 字段
						label: '客户名称', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'contacts', // 字段
						label: '联系人', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'wangdian', // 字段
						label: '网点名称', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'address', // 字段
						label: '维修地址', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isRight: true, // 如果存在右侧图标，为 true ，反之 false
						rightIcon: 'icon-dizhi', // 右侧图标
						rightIconColor: '#3c9cff', // 右侧图标颜色
					}, {
						prop: 'mobile', // 字段
						label: '联系电话', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'repairDesc', // 字段
						label: '故障描述', // 字段名称
						pageTitle: '附件列表',
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						textMsgList: [], // 文字内容
						pictureList: [], // 图片内容
						voiceList: [], // 语音内容
						videoList: [], // 视频内容
						isEdit: false, // 是否可编辑
					}, {
						prop: 'applyPerson', // 字段
						label: '申请人', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isRight: true, // 如果存在右侧图标，为 true ，反之 false
						rightIcon: 'icon-dianhua', // 右侧图标
						rightIconColor: '#3c9cff', // 右侧图标颜色
					}
				]
				
				// 其他信息
				this.otherInfos = [
					{
						prop: 'taskOrderNo', // 字段
						label: '任务单号', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'name', // 字段
						label: '客户名称', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'zuzhiName', // 字段
						label: '组织名称', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'repairOrderNo', // 字段
						label: '维修单号', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'cartNum', // 字段
						label: '车号', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'repairDate', // 字段
						label: '维修日期', // 字段名称
						pageTitle: '附件列表',
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'repairOrderState', // 字段
						label: '维修单状态', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}
				]
				
				// 车辆信息
				this.cartInfos = [
					{
						prop: 'cartNumber', // 字段
						label: '车号', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isEdit: false, // 是否可编辑
						isRight: false, // 如果存在右侧图标，为 true ，反之 false
						rightIcon: '', // 右侧图标
						rightIconColor: '', // 右侧图标颜色
					}, {
						prop: 'cartType', // 字段
						label: '车型', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
					}, {
						prop: 'materialDesc', // 字段
						label: '物料描述', // 字段名称
						pageTitle: '物料描述', // 描述页面的标题
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						textMsgList: [], // 文字内容
						pictureList: [], // 图片内容
						voiceList: [], // 语音内容
						videoList: [], // 视频内容
						isEdit: false, // 是否可编辑
					}, {
						prop: 'configInfo', // 字段
						label: '配置信息', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: null, // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isEdit: false, // 是否可编辑
					}, {
						prop: 'componentInfo', // 字段
						label: '关键零部件号', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: null, // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isEdit: false, // 是否可编辑
					}, {
						prop: 'buyerTime', // 字段
						label: '购买日期', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isEdit: false, // 是否可编辑
					}, {
						prop: 'hourPrice', // 字段
						label: '小时计费', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: true, // 是否显示边框
						border: 'surround', // 只有 isBorder 为 true 才生效
						isEdit: false, // 是否可编辑
					}, {
						prop: 'laborCost', // 字段
						label: '工时计费', // 字段名称
						readonly: true, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效 surround
						isEdit: false, // 是否可编辑
					}, {
						prop: 'customerLevelInfo', // 字段
						label: '客户评级', // 字段名称
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: null, // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						isEdit: false, // 是否可编辑
					}, {
						prop: 'sceneDetails', // 字段
						label: '现场详情', // 字段名称
						pageTitle: '附件列表',
						readonly: false, // 是否只读
						theme: 'table', // 组件主题
						placeholder: '', // 如果是输入框，文字提示内容设置
						value: '', // 绑定的值
						isBorder: false, // 是否显示边框
						border: '', // 只有 isBorder 为 true 才生效
						textMsgList: [], // 文字内容
						pictureList: [], // 图片内容
						voiceList: [], // 语音内容
						videoList: [], // 视频内容
						isEdit: false, // 是否可编辑
					}
				]
			},
			
			// 查询订单详情数据，并回显
			findOrderDetails() {
				let data = {
					customerName: '张三',
					contacts: '李四',
					wangdian: '齐鲁合力叉车',
					address: '安徽合肥',
					mobile: '18254857568',
					applyPerson: '羚羊测试账号1',
					dispatchResult: '张三',
					cartNumber: '皖A125428',
					cartType: '叉车',
					repairDesc: {
						title: '故障描述',
						textMsgList: [],
						pictureList: [],
						voiceList: [],
						videoList: []
					},
					materialDesc: {
						title: '物料描述',
						textMsgList: [],
						pictureList: [],
						voiceList: [],
						videoList: []
					},
					configInfo: {
						label: '配置信息',
						isLink: true,
						list: [
							{ label: '工作环境', value: '鲲鹏果业' },
							{ label: '吨位', value: '10T' },
							{ label: '叉车车型', value: '陕西合力叉车' },
							{ label: '维修地址', value: 'G2系列deja脚手架基地' },
							{ label: '联系电话', value: '17325252526' },
							{ label: '故障描述', value: '车轮坏了' },
							{ label: '申请人', value: '张三' },
						]
					},
					componentInfo: {
						label: '关键零部件号',
						isLink: true,
						list: [
							{ label: '工作环境', value: '鲲鹏果业' },
							{ label: '吨位', value: '10T' },
							{ label: '叉车车型', value: '陕西合力叉车' },
							{ label: '维修地址', value: 'G2系列deja脚手架基地' },
							{ label: '联系电话', value: '17325252526' },
							{ label: '故障描述', value: '车轮坏了' },
							{ label: '申请人', value: '张三' },
						]
					},
					buyerTime: '2024/11/01 20:46',
					hourPrice: '2.00',
					laborCost: '2.00',
					customerLevelInfo: {
						label: '客户评级',
						isLink: true,
						list: [
							{ label: '工作环境', value: '鲲鹏果业' },
							{ label: '吨位', value: '10T' },
							{ label: '叉车车型', value: '陕西合力叉车' },
							{ label: '维修地址', value: 'G2系列deja脚手架基地' },
							{ label: '联系电话', value: '17325252526' },
							{ label: '故障描述', value: '车轮坏了' },
							{ label: '申请人', value: '张三' },
						]
					},
					sceneDetails: {
						title: '现场详情',
						textMsgList: [],
						pictureList: [],
						voiceList: [],
						videoList: []
					},
				}
				
				this.showData(data) // 回显数据
			},
			
			// 回显数据，data：需要回显的数据集合
			showData(data) {
				// 设置任务信息
				this.taskInfos.forEach(item => {
					for (let i in data) {
						if (
							item.prop === i &&
							item.prop !== 'repairDesc'
						) {
							item.value = data[i]
						}
						
						// 故障描述
						if (item.prop === 'repairDesc') {
							item.label = data.repairDesc.title
							item.textMsgList = data.repairDesc.textMsgList
							item.pictureList = data.repairDesc.pictureList
							item.voiceList = data.repairDesc.voiceList
							item.videoList = data.repairDesc.videoList
						}
					}
				})
				
				// 设置派工结果
				this.dispatchResult = data.dispatchResult
				
				// 设置车辆信息
				this.cartInfos.forEach(item => {
					for (let i in data) {
						if (
							item.prop === i &&
							item.prop !== 'materialDesc' &&
							item.prop !== 'configInfo' &&
							item.prop !== 'componentInfo' &&
							item.prop !== 'sceneDetails' &&
							item.prop !== 'customerLevelInfo'
						) {
							item.value = data[i]
						}
						
						// 物料描述
						if (item.prop === 'materialDesc') {
							item.label = data.materialDesc.title
							item.textMsgList = data.materialDesc.textMsgList
							item.pictureList = data.materialDesc.pictureList
							item.voiceList = data.materialDesc.voiceList
							item.videoList = data.materialDesc.videoList
						}
						
						// 配置信息
						if (item.prop === 'configInfo') {
							item.value = data.configInfo
						}
						
						// 关键零部件号详情
						if (item.prop === 'componentInfo') {
							item.value = data.componentInfo
						}
						
						// 现场详情
						if (item.prop === 'sceneDetails') {
							item.label = data.sceneDetails.title
							item.textMsgList = data.sceneDetails.textMsgList
							item.pictureList = data.sceneDetails.pictureList
							item.voiceList = data.sceneDetails.voiceList
							item.videoList = data.sceneDetails.videoList
						}
						
						// 客户评级信息
						if (item.prop === 'customerLevelInfo') {
							item.value = data.customerLevelInfo
						}
					}
				})
			},
			
			// 修改详情中某个字段下的属性值
			// type：1 车辆信息
			// field：要修改哪个字段中的数据
			// attr：要修改哪个字段下的哪个属性值集合（因为可能是多个属性同时修改）
			// data：修改后的值
			updateData({ type, field, attrs, data}) {
				if (type === 1) {
					// 修改车辆信息中数据
					this.cartInfos.forEach(item => {
						if (item.prop === field) {
							let arr = attrs.split(',')
							
							arr.forEach(j => {
								item[j] = data[j]
							})
						}
					})
				}
			},
			
			// 添加故障件
			handleAddRepairInfo(data) {
				let obj = {
					classifyTitle: '系统分类',
					classifyName: data.classifyTitle,
					isExpand: true,
					list: [
						{
							label: '名称',
							value: data.name,
							prop: 'name',
							theme: 'table',
							readonly: true,
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
						}, {
							label: '图件号',
							value: data.num,
							prop: 'num',
							theme: 'table',
							readonly: true,
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
						},
						{ label: '单价', value: data.unitPrice, prop: 'unitPrice', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{ label: '附件', value: '', prop: 'attachment', pageTitle: '故障描述', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{ label: '需求数量', value: data.demand, prop: 'demand', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{ label: '申请数量', value: data.apply, prop: 'apply', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{ label: '单位', value: data.unit, prop: 'unit', textMsgList: [], pictureList: [], voiceList: [], videoList: [] },
						{
							label: '故障件条码',
							value: '',
							prop: 'repairNo',
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
							repairNoList: []
						}, {
							label: '维修类型',
							value: '',
							prop: 'repairType',
							textMsgList: [],
							pictureList: [],
							voiceList: [],
							videoList: [],
							isEdit: true,
						},
					]
				}
				
				// 将添加的故障件信息加入到状态管理中
				this.$store.commit('repair/setRepairComponent', obj)
			},
			
			// 点击添加故障件中的附件时，设置跳转到下一个页面的标题
			setAttchmentTitle(index) {
				let title = '故障描述'
				
				return title
			},
			
			// 点击系统分类名称时的回调（展开/收起信息）
			handleExpand(index) {
				let repairList = JSON.parse(JSON.stringify(this.repairList))
				
				repairList.map((item, i) => {
					if (i === index) {
						item.isExpand = !item.isExpand
						
						return item
					}
				})
				
				this.$store.commit('repair/resetRepairComponent', repairList)
			},
			
			// 点击时间轴跳转到相应页面
			toTimeAxis() {
				uni.navigateTo({
					url: `/pages/repairManage/repairHistory/timeAxis?cartNum=${this.cartNum}`
				})
			}
		}
	}
</script>

<style>

</style>
